<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>EC MovieClip</title>
    <style>
        body{
            margin:0;
        }
        .movieclip{
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom: 0;
        }
    </style>
</head>

<body>

<canvas id="canvas-movieclip" class="movieclip"></canvas>

<!-- build:js scripts/libs/easyrender.js -->
<script src="scripts/Base.js"></script>
<script src="scripts/ES6-promise.pollyfill.js"></script>
<script src="scripts/Utils.js"></script>
<script src="scripts/Event.js"></script>
<script src="scripts/Loader.js"></script>
<script src="scripts/RequestAnimationFrame.js"></script>
<script src="scripts/Ticker.js"></script>
<script src="scripts/Timer.js"></script>
<script src="scripts/Easing.js"></script>
<script src="scripts/Tween.js"></script>
<script src="scripts/Renderer.js"></script>
<script src="scripts/MovieClip.js"></script>
<script src="scripts/TouchEvent.js"></script>
<script src="scripts/Stats.js"></script>
<!-- endbuild -->

<script>
    var imgLoader = RES.loadImage("images/qie_dance.png");

    imgLoader.on("success", function(qieBitMapData){
        var resLoader = RES.loadJson("images/mc_qie.json");
        resLoader.on("success", function(resData){
            var canvas = document.getElementById('canvas-movieclip');
            var stage = new EC.Stage(canvas, {
                width: 750,
                height: 1334
            });

            var mc = new EC.MovieClip(qieBitMapData, resData, 'qie');
            mc.x = 50;
            mc.y = 50;
            mc.gotoAndPlay(1, -1);
            stage.addChild(mc);
            mc.touchEnabled = true;

            var shapeContainer = new EC.Sprite();
            stage.addChild(shapeContainer);
            shapeContainer.touchEnabled = true;
            shapeContainer.on("touch", function (e) {
                console.log(e.target);
            });

            var shape = new EC.Shape();
            shape.fill("#f90", 0.5);
            shape.rect(60, 210, 280, 280);
            shapeContainer.addChild(shape);
            shape.touchEnabled = true;

            shape.on("touch", function(e){
                //shape.visible = false;
                console.log(e.target);
            });

            var shape2 = new EC.Shape();
            shape2.fill("#000", 0.5);
            shape2.rect(100, 250, 200, 200);
            shapeContainer.addChild(shape2);
            shape2.touchEnabled = true;

            shape2.on("touch", function(e){
                e.stopPropagation();
                console.log(e.target);
            });

            stage.touchEnabled = true;
            stage.on("touch", function (e) {
                console.log(e.target);
            });

        });
    });
</script>
</body>
</html>